import React, { createRef } from 'react'

import { Button, Table, Modal, Form, Input } from 'antd'
import { computeHeadingLevel } from '@testing-library/react'
export default class App extends React.Component {
    state = {
        data: [
            { key: "1", username: 'www', age: '32', address: "wwwww" },
            { key: "2", username: 'rrr', age: '44', address: "dsa" },
        ],
        isShow: false,
        isUpdate: 0
    }
    form = createRef()
    handleOk = async () => {
        const res = await this.form.current.validateFields()
        if (!this.state.isUpdate) {
            const key = +new Date()
            const obj = { ...res, key }
            this.setState({
                data: [...this.state.data, obj]
            })
        } else {
            const key = this.state.isUpdate
            const obj = { ...res, key }
            const newArr = [...this.state.data]
            const index = this.state.data.findIndex(item => item.key == key)
            newArr[index] = obj
            this.setState({
                data: newArr
            })
        }
        this.handleCancel()
    }
    handleCancel = () => {
        this.setState({
            isShow: false
        })
        this.form.current.resetFields()
    }
    add = () => {
        this.setState({
            isShow: true,
            isUpdate: 0
        })
    }
    delHandler = (record) => {
        const newArr = this.state.data.filter(item => item.key !== record.key)
        this.setState({
            data: newArr
        })
    }
    updateHandler = (record) => {
        console.log(record.key)
        this.setState({
            isShow: true,
            isUpdate: Number(record.key)
        })
        this.form.current.setFieldsValue(record)
    }
    columns = [
        { title: 'Username', dataIndex: "username", key: "username" },
        { title: 'age', dataIndex: "age", key: "age" },
        { title: 'address', dataIndex: "address", key: "address" },
        {
            title: 'action',
            key: 'action',
            render: (text, record) => (
                <div>
                    <Button type='primary' onClick={() => this.updateHandler(record)}>修改</Button>
                    <Button type='danger' onClick={() => this.delHandler(record)}>删除</Button>
                </div>
            )
        }
    ]
    render() {

        let { data, isShow } = this.state
        return (
            <div>
                <Button type='primary' onClick={this.add}>添加</Button>
                <Table dataSource={data} columns={this.columns}></Table>
                <Modal
                    title={"添加"}
                    visible={isShow}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    forceRender={true}
                >
                    <Form ref={this.form}>
                        <Form.Item label="username" name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="age" name="age" rules={[{ required: true, message: 'Please input your age!' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="address" name="address" rules={[{ required: true, message: 'Please input your address!' }]}>
                            <Input />
                        </Form.Item>
                    </Form>
                </Modal>
            </div >
        )
    }
}